<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <link rel="stylesheet" href="../css/05.css">
</head>
<body>
<div class="container">
    <h1>添加商品</h1>
    <form action="${pageContext.request.contextPath}/item/add" method="post"  enctype="multipart/form-data">
        <div class="form-group">
            <label>商品图片:</label>

            <input type="file" name="file"  id="image-input">
            <img id="image-preview" src="#">

        </div>
        <div class="form-group">
            <label>商品名称:</label>
            <input type="text" name="itemName" required>
        </div>
        <div class="form-group">
            <label>商品价格:</label>
            <input type="number" name="price" required>
        </div>
        <div class="form-group">
            <label>商品描述:</label>
            <textarea name="description" required></textarea>
        </div>
        <button type="submit" class="btn">确认添加</button>
    </form>
</div>

<script>
    //添加照片时，上传图片回显
    const imageInput = document.getElementById('image-input');
    const imagePreview = document.getElementById('image-preview');

    imageInput.addEventListener('change', function() {
        const file = this.files[0];
        const reader = new FileReader();

        reader.onload = function(e) {
            imagePreview.src = e.target.result;
        }

        reader.readAsDataURL(file);
    });
</script>

</body>
</html>